<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary"
                   @click="chapterApplyDialog()">
          用章申请
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading"
              :data="tableData"
              border
              stripe
              style="width: 100%"
              @sort-change="sortChange">
      <el-table-column prop="id"
                       label="ID"
                       width="100"
                       align="center"
                       fixed
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column prop="department_id"
                       label="所属部门"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.department.name }}
        </template>
      </el-table-column>
      <el-table-column prop="type"
                       label="申请类型"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column prop="content"
                       label="用章内容"
                       min-width="300"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column prop="apply_id"
                       label="申请人"
                       width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.applier.realname }}
        </template>
      </el-table-column>
      <el-table-column prop="created_at"
                       label="申请时间"
                       width="200"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.createdAt }}
        </template>
      </el-table-column>
      <el-table-column prop="status"
                       label="状态"
                       width="100"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column prop="apply_id"
                       label="审核人"
                       width="150"
                       align="center"
                       sortable="custom">
        <template slot-scope="scope">
          {{ scope.row.checker.realname }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       fixed="right"
                       width="200"
                       align="center">
        <template slot-scope="scope">
          <el-button type="text"
                     @click="ChapterCheckDialog(scope.row)">审核</el-button>
          <el-button type="text"
                     @click="uploadChapterDialog(scope.row)">附件</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="用章申请"
               width="50%"
               :visible.sync="dialogChapterApplyVisible">
      <chapter-apply ref="chapterApply"
                     style="margin-left:30px;"
                     :type-item="typeItem"
                     :chapter-type-item="chapterTypeItem"
                     :admin-item="adminItem"
                     :loading="loadingChapterApply"
                     :organ-data="organData"
                     @submit="chapterApply" />
    </el-dialog>

    <el-dialog title="用章审核"
               width="50%"
               :visible.sync="dialogChapterCheckVisible">
      <chapter-check ref="chapterCheck"
                     style="margin-left:30px;"
                     :row="row"
                     :department-item="departmentItem"
                     :type-item="typeItem"
                     :loading="loadingChapterCheck"
                     :organ-data="organData"
                     @submit="ChapterCheck" />
    </el-dialog>

    <el-dialog title="附件管理"
               width="50%"
               :visible.sync="dialogUploadChapterVisible"
               :destroy-on-close="true"
               @close="closeUploadDialog">
      <upload-chapter style="margin-left:30px;"
                      :attach-list="attachList"
                      :attach-data="attachData"
                      @submit="handleSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import { addContract, editContract, getContractData } from '@/api/contract'
import { getOrganData } from '@/api/dictionary'
import { parseTime } from '@/utils'
import ChapterApply from './components/add'
import ChapterCheck from './components/edit'
import uploadChapter from './components/upload'
export default {
  components: { ChapterApply, ChapterCheck, uploadChapter },
  props: {
    tableData: {
      default: () => [],
      type: Array
    },
    loading: {
      default: false,
      type: Boolean
    },
    departmentItem: {
      default: () => [],
      type: Array
    },
    typeItem: {
      default: () => [],
      type: Array
    },
    chapterTypeItem: {
      default: () => [],
      type: Array
    },
    adminItem: {
      default: () => [],
      type: Array
    },
    query: {
      default: null,
      type: Object
    }
  },
  data() {
    return {
      dialogChapterApplyVisible: false,
      dialogChapterCheckVisible: false,
      dialogUploadChapterVisible: false,
      loadingChapterApply: false,
      loadingChapterCheck: false,
      loadingUploadChapter: false,
      downloadLoading: false,
      row: {
        id: null, departmentId: null, name: null, code: null, type: null,
        clientCompany: null, clientMan: null, clientPhone: null,
        consultCompany: null, consultMan: null, consultPhone: null,
        receivedTime: null, remark: null
      },
      attachList: [],
      attachData: { id: null, companyId: null, departmentId: null },
      organData: [],
      excelData: null
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit')
    },
    sortChange(sort) {
      this.$emit('change', {
        field: sort.prop,
        rule: sort.order
      })
      this.$emit('submit')
    },
    chapterApplyDialog() {
      this.dialogChapterApplyVisible = true
      this.getOrganData()
      this.$nextTick(() => {
        this.$refs.chapterApply.handleFormReset()
      })
    },
    ChapterCheckDialog(row) {
      this.dialogChapterCheckVisible = true
      this.$nextTick(() => {
        this.$refs.chapterCheck.handleFormReset()
      })
      this.getOrganData()
      const { id, departmentId, name, code, type, clientCompany, clientMan, clientPhone, consultCompany, consultMan, consultPhone, receivedTime, remark } = row
      this.row = { id, departmentId, name, code, type, clientCompany, clientMan, clientPhone, consultCompany, consultMan, consultPhone, receivedTime, remark }
    },
    uploadChapterDialog(row) {
      this.dialogUploadChapterVisible = true
      this.attachList = row.attachList
      const { id, companyId, departmentId } = row
      this.attachData = { id, companyId, departmentId }
    },
    chapterApply(form) {
      this.dialogChapterApplyVisible = true
      addContract(form).then(res => {
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingChapterApply = false
        this.dialogChapterApplyVisible = false
      }).catch(err => {
        this.loadingChapterApply = false
      })
    },
    ChapterCheck(form) {
      this.loadingChapterCheck = true
      editContract(form).then(res => {
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.handleSubmit()
        this.loadingChapterCheck = false
        this.dialogChapterCheckVisible = false
      }).catch(err => {
        this.loadingChapterCheck = false
      })
    },
    closeUploadDialog(done) {
      this.attachList = []
      this.attachData = { id: null, companyId: null, departmentId: null }
    },
    async getOrganData() {
      this.organData = await getOrganData()
    }
  }
}
</script>

<style lang="scss">
.el-table th.gutter {
  display: table-cell !important;
}
.el-table td.is-center {
  top: 1px !important;
}
</style>
